<template>
    <ul class="m-list">
        <li v-for="(l,i) in films" :key="i" @click.stop="gotofilmdetail(l)">
            <img  class="l-img" :src="l.poster" alt="">
            <div class="m-center">
                <h3 class="title">
                    <span>{{l.name}}</span>
                    <span>{{l.item.name}}</span>
                </h3>
                <p>
                    观众评分: <span class="color">{{l. grade }}</span>
                </p>
                <p class="van-ellipsis myactior" >
                    主演:
                    <span v-for="(v,k) in l.actors" :key="k">
                        {{v.name}}
                    </span>
                </p>
                <p>
                    <span>{{l.nation}}</span>
                    <span> {{l.runtime }} 分钟</span>
                </p>
            </div>
            <van-button class="buy-btn" @click.stop="gotobuyticket(l)">购票</van-button>
        </li>
    </ul>
</template>

<script>
export default {
    props:['films'],
    methods:{
        gotofilmdetail(l){
            this.$router.push({name:'film',params:{filmId:l.filmId},query:{name:l.name}})
        },
        gotobuyticket(l){
            this.$router.push({name:'film-cinema',params:{filmId:l.filmId},query:{name:l.name}})
        }
    }
}
</script>



<style lang="scss" scoped>
.m-list{
        padding: 10px;
        li{
            width:100%;
            display: flex;
            margin-bottom:10px;
            align-items: center;
            position: relative;
            .l-img{
                width:66px;
                height:95px;
            }
            .m-center{
                padding:0 10px;
                flex:1;
                flex-shrink: 0;  // 不可以被压缩
                display: flex;
                flex-direction: column;
                justify-content: center;
               
                .name{
                    font-size:18px;
                    color:#191a1b;
                }
                .myactior{
                    width:240px;
                }
                p{
                    color:#797d82;
                    font-size:14px;
                    margin:4px 0;
                }
            }
            .buy-btn{
                width:50px;
                height:25px;
                border: 1px solid #ff5f16;
                color:#ff5f16;
                font-size: 13px;
                text-align: center;
                border-radius: 2px;
                position: relative;
                padding:0 ;
                flex-shrink: 0;  
                position: absolute;
                top:20px;
                right:10px;
            }
        }
    }

    .color{
        color:#ff5f16;
    }
    .title{
        color:#333;
    }
    .width200{
        width:240px;
    }
</style>
